<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Vue入门 - 模板语法</title>
</head>
<body>
<div id="container">
  <p>{{userName}}</p>
  <p v-html="userName"></p>
  <img :src="imgUrl" alt="" /> <!--<img v-bind:src="imgUrl"/>-->
  <button @click="test">不带参数的按钮</button> <!--<button v-on:click="test">不带参数的按钮</button>-->
  <button @click="test1(userName)">带参数的按钮</button>
</div>
<script src="../../js/vue.js"></script>
<script>
  const vm = new Vue({
    el: '#container',
    data: {
      userName: '<span style="color:red">Miracle</span>',
      imgUrl: 'https://cn.vuejs.org/images/logo.png'
    },
    methods: {
      test() {
        alert('不带参数');
      },
      test1(name) {
        alert(`带参数${name}`);
      }
    }
  })
</script>
</body>
</html>
